<template>
  <view class="p-t13 bg-1 r-10 section overflow-hidden">
    <view class="p-a20 p-b30 flex-d-c hairline-bottom">
      <image class="avatar" :src="resume.avatar" mode="aspectFill" />
      <text class="m-t20 text-700-140">{{ resume.nickname }}</text>
      <text class="m-t30 text-400-140">男 23岁 成都</text>
      <view class="m-t24 w flex-sb">
        <view class="flex">
          <image class="icon" src="@/static/images/office/envelope.png" mode="aspectFit" />
          <text class="m-l8 text-400-426">{{ resume.mobile }}</text>
        </view>
        <view class="flex">
          <image class="icon" src="@/static/images/office/envelope.png" mode="aspectFit" />
          <text class="m-l8 text-400-426">{{ resume.email }}</text>
        </view>
      </view>
    </view>
    <view v-if="resume.educate.length > 0" class="p-h20 p-v30 flex-sb hairline-bottom">
      <text class="text-700-130">{{ resume.educate[0].title }}</text>
      <text class="text-400-426">{{ resume.educate[0].quali }} | {{ resume.educate[0].speciality }} {{ resume.educate[0].enrol_time.slice(0, 4) }}-{{ resume.educate[0].end_time.slice(0, 4) }}</text>
    </view>
    <view class="p-h20 p-v30 hairline-bottom">
      <view class="m-b20">
        <text class="text-700-130">自我描述</text>
      </view>
      <text class="text-400-326">{{ resume.content }}</text>
    </view>
    <view class="p-h20 p-v30 hairline-bottom">
      <text class="text-700-130">教育经历</text>
      <view v-for="item in resume.educate" :key="item.id">
        <view class="m-t20">
          <text class="text-400-130">{{ item.title }}</text>
        </view>
        <view class="m-t20 flex-sb">
          <text class="text-400-328">{{ item.quali }} | {{ item.speciality }}</text>
          <text class="text-400-328">{{ item.enrol_time.slice(0, 4) }}-{{ item.end_time.slice(0, 4) }}</text>
        </view>
      </view>
    </view>
    <view class="p-h20 p-v30 hairline-bottom">
      <text class="text-700-130">工作经历</text>
      <view v-for="item in resume.job" :key="item.id">
        <view class="m-t20">
          <text class="text-400-130">{{ item.title }}</text>
        </view>
        <view class="m-t20 flex-sb">
          <text class="text-400-328">{{ item.position }}</text>
          <text class="text-400-328">{{ item.enrol_time.slice(0, 4) }}-{{ item.end_time.slice(0, 4) }}</text>
        </view>
        <view class="m-t30 m-b20">
          <text class="text-400-130">工作内容描述：</text>
        </view>
        <text class="text-400-326">{{ item.content }}</text>
      </view>
    </view>
    <view class="p-h20 p-v30 hairline-bottom">
      <text class="text-700-130">项目经历</text>
      <view class="m-t20">
        <text class="text-400-130">四川生个龙宝科技有限公司</text>
      </view>
      <view class="m-t20 flex-sb">
        <text class="text-400-328">UI设计师</text>
        <text class="text-400-328">2013.12-至今</text>
      </view>
      <view class="m-t30 m-b20">
        <text class="text-700-130">项目描述：</text>
      </view>
      <text class="text-400-326">工作内容填写区域...工作内容填写区域...工作内容填写区域...工作内容填写区域....</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { defineProps } from 'vue'
  import type { TResume } from '@/types/api.d'

  defineProps<{
    resume: TResume
  }>()
</script>

<style lang="scss" scoped>
	.section {
		position: relative;
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			height: 13rpx;
			background-color: $bg-color-2;
		}

		.avatar {
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
		}

		.icon {
			width: 27rpx;
			height: 27rpx;
		}
	}
</style>
